<template>
    <page-box class="custom-page-box">
        <template v-slot:header>
            <ask-breadcrumb>
                <template v-for="(item, index) in $getBreadCrumbsName($route.path)">
                    <ask-breadcrumb-item :key="index" v-if="item.path" :to="'/' + item.path">{{ item.meta.title }}</ask-breadcrumb-item>
                    <ask-breadcrumb-item :key="index" v-else>{{ item.meta.title }}</ask-breadcrumb-item>
                </template>
            </ask-breadcrumb>
        </template>
        <page-search>
            <page-search-column class="fixed-column">
                <page-search-item>
                    <el-input class="pbb__search-input" v-model="form.formName " placeholder="请输入表单名称" clearable></el-input>
                </page-search-item>
                <page-search-item>
                    <el-select class="pbb__search-input" v-model="form.status" placeholder="请选择状态" clearable>
                        <el-option value="2" label="已确认"></el-option>
                        <el-option value="1" label="未确认"></el-option>
                    </el-select>
                </page-search-item>
                <page-search-item>
                    <el-cascader
                        class="pbb__search-input long" v-model="form.categoryId"
                        placeholder="请选择分类"
                        ref="cascader"
                        collapse-tags
                        clearable
                        :options="typeOptions"
                        :props="{ value: 'id', label: 'name', multiple: true }">
                    </el-cascader>
                </page-search-item>
                <page-search-item>
                    <el-button type="primary" class="pbb__search-btn" @click="getTable()">查询</el-button>
                </page-search-item>
            </page-search-column>
        </page-search>
        <div class="task-manage-container">
            <el-table
                v-show="tableData.length"
                class="pbb__table"
                header-cell-class-name="pbb__table-thead"
                cell-class-name="pbb__table-thead-cell"
                row-class-name="pbb__table-thead-row"
                :data="tableData"
                style="width: 100%;height: 100%;background: #fff;overflow-y: auto;">
                <el-table-column
                    label="序号"
                    align="center"
                    type="index"
                    width="60">
                </el-table-column>
                <el-table-column
                    prop="formName"
                    label="表单名称">
                </el-table-column>
                <el-table-column
                    prop="categoryName"
                    label="表单分类">
                </el-table-column>
                <el-table-column
                    prop="status"
                    label="状态">
                    <template slot-scope="scope">
                        <span :class="scope.row.status === 2 ? 'green' : 'red'">{{ scope.row.status === 2 ? "已确认" : "未确认" }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="creator"
                    label="上报人">
                </el-table-column>
                <el-table-column
                    prop="address"
                    label="上报区域">
                </el-table-column>
                <el-table-column
                    prop="createTime"
                    label="上报时间">
                </el-table-column>
                <el-table-column
                    label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" @click="toDetail(scope.row)">查看</el-button>
                        <el-button v-if="scope.row.status !== 2" size="mini" type="text" @click="toCheck(scope.row)">确认</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <ask-empty-text
                style="min-height: 400px;"
                v-if="tableData.length === 0">
            </ask-empty-text>
        </div>
        <template v-slot:footer v-if="total > 0">
            <pagination :total="total" :page.sync="pageIndex" :limit.sync="pageSize" @pagination="getTable"/>
        </template>
    </page-box>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { State } from "vuex-class";

@Component({
    name: "DeclareHandle"
})
export default class DeclareHandle extends Vue {
    @State(state => state.authArea) authArea: any;

    form: any = {
        formName: "",
        status: "",
        categoryId: []
    }

    // 数据总数
    total = 0;
    // 每页数量
    pageSize = 10;
    // 当前页码
    pageIndex = 1;
    // 表格数据
    tableData: any[] = []
    typeOptions: any[] = []

    created() {
        this.getTable();
        this.getType();
    }

    activated() {
        this.getTable();
        this.getType();
    }

    async getType() {
        const res = await this.$server["declare/getType"]({
            data: {
                cityCode: this.authArea.cityCode
            }
        });
        if (res.data.code === 200) {
            this.typeOptions = res.data.data[0].children;
        }
    }

    // 查询表格
    async getTable() {
        const { status, formName } = this.form;
        const ids = this.$refs.cascader ? (this.$refs.cascader as any).getCheckedNodes(true).map((item: any) => item.data.id) : [];
        console.log(ids);
        const res = await this.$server["declare/handleList"]({
            data: {
                pageSize: this.pageSize,
                currentPage: this.pageIndex,
                status: status,
                formName: formName,
                categoryId: ids.join()
            }
        });
        if (res.data.code === 200) {
            this.tableData = res.data.data.records;
            this.total = res.data.data.total;
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    // 查看
    toDetail(row: any) {
        const { formName, formId, dataId } = row;
        this.$router.push({
            name: "DeclareHandleDetail",
            query: {
                id: formId,
                dataFormId: dataId,
                checkId: row.id,
                name: formName,
                onlyData: "onlyData",
                status: row.status
            }
        });
    }

    toCheck(row: any) {
        this.$confirm("请确认填报内容无误，或上报内容已处置完毕。", "确认上报").then(async() => {
            const res = await this.$server["declare/checkData"]({
                data: {
                    id: row.id
                }
            });
            if (res.data.code === 200) {
                this.$message.success("操作成功");
                this.getTable();
            } else {
                this.$message.error(res.data.message || "接口请求错误!");
            }
        }).catch();
    }
}
</script>
<style lang="scss" scoped>
.task-manage-container {
    height: calc(100% - 50px);
}
.pbb__search-input.long {
    width: 260px;
}

.pbb__table {
    .green {
        color: #32A78F;
    }
    .red {
        color: #de2728;
    }
    .yellow {
        color: #f3c14f;
    }
    .blue {
        color: #2c82c9;
    }
}
</style>
